import React from 'react'
import context from './context'

class TodoItem extends React.Component {
    render() {
        const {data,index} = this.props
        return (
            <context.Consumer>
                {
                    function({removeItem,completeItem}){
                        return (
                            <tr className={data.done ? 'table-success' : ''}>
                                <th scope="row">{index + 1}</th>
                                <td>{data.todo}</td>
                                <td>{data.date}</td>
                                <td>{data.done ? '是' : '否'}</td>
                                <td>
                                    <i className="bi bi-check-square me-3" onClick={completeItem.bind(null, data.id)}></i>
                                    <i className="bi bi-x-square" onClick={removeItem.bind(null, data.id)}></i>

                                </td>
                            </tr>
                        )
                    }
                }
            </context.Consumer>
            
        )
    }
}

export default TodoItem;